<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端监控</title>
</head>
<body>
  <div id="monitorWrap">
    <div class="content" style="width:600px; height: 600px; background-color: gray;">
      <input class="btn1" type="button" value="点击抛出错误" onclick="errorClick()">
      <input class="btn2" type="button" value="点击抛出promise错误" onclick="promiseErrorClick()">
      <input class="btn3" type="button" value="ajax成功请求" onclick="ajaxSendSuccess()">
      <input class="btn4" type="button" value="ajax失败请求" onclick="ajaxSendError()">
      <input class="btn5" type="button" value="fetch失败请求" onclick="fetchError()">
    </div>
  </div>
  <script>
    // 2 同步的js报错 被error事件捕获
    const errorClick = () => {
      window.someVar.error = 'error'
    }
    // 3 promise里面的任何错误只能unhandledrejection捕获，上面的error事件捕获不到
    const promiseErrorClick = () => {
      new Promise((reslove, reject) => {
        // unhandledrejection下报错的reason是 reason: "error"
        // reject('error')
        // unhandledrejection下报错的reason是 reason: {message: xx, stack: xx}
        window.someVar.error = 'error'
      })
    }
    // 4 ajax错误
    const ajaxSendSuccess = () => {
      let xhr = new XMLHttpRequest
      // 请求到webpack devServer setupMiddlewares
      xhr.open('GET', '/api/success', true)
      xhr.responseType = 'json'
      xhr.send()
      xhr.onload = () => {
      }
    }
    const ajaxSendError = () => {
      let xhr = new XMLHttpRequest
      xhr.open('GET', '/api/error', true)
      xhr.responseType = 'json'
      xhr.send()
      xhr.onload = () => {
      }
      xhr.error = (error) => {
      }
    }
    // 5 fetch错误
    const fetchError = () => {
      fetch('/api/error')
    }
  </script>
  <!-- 1 资源加载错误 被error事件捕获(必须要写在后面 否则error可能捕获不到) -->
  <!-- <script src="aaa.js"></script>
  <img src="aaa.png" alt="" srcset=""> -->
</body>
</html>